<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" offset="50"> </van-list>
      <ArticleItem v-for="obj in list" :key="obj.art_id" :artObj="obj" @disLikeEV="disLikeFn" @reportEV="reportFn" @click.native="itemClickFn(obj.art_id)"></ArticleItem>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from '../../../components/ArticleItem.vue'
import { getAllArticleListlsAPI, dislikeArticleAPI, reportArticleAPI } from '@/api'
import Notify from '@/ui/Notify.js'
export default {
  props: {
    // list: Array
    active: Number
  },
  data() {
    return {
      list: [], // 文章列表数组
      loading: false, // 底部加载状态
      finished: false, // 底部完成状态
      theTime: new Date().getTime(), // 用于分页
      isLoading: false // 顶部加载状态
    }
  },
  components: {
    ArticleItem
  },
  created() {
    this.getArtcleListFn()
  },
  methods: {
    // 专门负责发送请求
    async getArtcleListFn() {
      const res = await getAllArticleListlsAPI({
        channel_id: this.active,
        timestamp: this.theTime
      })
      this.list = [...this.list, ...res.data.data.results]
      // pre_timestamp
      // 下一段开头的时间戳
      // 第一次 系统时间（timestamp）->后台返回0-9条数据-》携带第十条pre_timestamp值返回
      // 第二次（timestamp）-》上一次pre_timestamp(代表告诉后，从指定的时间戳在往后找10个)
      this.theTime = res.data.data.pre_timestamp
      this.loading = false // 如果不关闭，底部一直是加载中状态，下次触底会再触发onload
      if (res.data.data.pre_timestamp === null) {
        // 本次回来的是数据是最后，没有下一段数据了
        this.finished = true
      }
      // 顶部加载状态改为false
      this.isLoading = false
    },
    // 底部加载方法
    async onLoad() {
      if (this.list.length === 0) {
        return // 如果页面没有数据,没有高度,让本次onLoad逻辑代码不往下执行
      }
      this.getArtcleListFn()
    },
    // 顶部刷新数据事件方法
    async onRefresh() {
      this.list = []
      this.theTime = new Date().getTime()
      this.getArtcleListFn()
    },
    // 反馈-不感兴趣
    async disLikeFn(id) {
      try {
        await dislikeArticleAPI({
          artId: id
        })
        Notify({ type: 'success', message: '反馈成功' })
      } catch (err) {}
    },
    // 反馈垃圾内容
    async reportFn(id, value) {
      await reportArticleAPI({
        artId: id,
        type: value
      })
      Notify({ type: 'success', message: '举报成功' })
    },
    // 文章单元格-点击事件
    itemClickFn(id) {
      this.$router.push({
        path: `/detail?art_id=${id}`
      })
    }
  }
}
</script>

<style></style>
